<template>
	<view class="headlinesContainer">
		<!-- 导航 -->
		<scroll-view class="navScrollView" enable-flex scroll-x>
			<view class="navItem " :class="{ active: navId === -1 }" @click="change(-1)"><text>推荐</text></view>
			<view class="navItem " v-for="(navItem, index) in navData" :key="navItem.id" :class="{ active: navId === navItem.id }" @click="change(navItem.id)">
				<text>{{ navItem.name }}</text>
			</view>
		</scroll-view>
		<!-- 展示图片 -->
		<view class="imgContainer" v-if="navId==-1">
			<image src="https://img.tianditao.com/mall/jktt/201907/ebce5bf4b4f1481b97e1387ff83ee0b2.jpeg"></image>
			<view class="title">血管需要"排毒"?做好5监视情,别给血管添堵就行!</view>
		</view>
		<!-- 头条信息展示区域 -->
		<toutiaoDetail :headlinesData='headlinesData' :navId="navId"/>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import toutiaoDetail from '../../components/toutiaoDetail/toutiaoDetail.vue'
export default {
	data() {
		return {
			navData: [], //导航栏数据
			headlinesData: [], //头条数据
			navId: -1 //控制高亮显示
		};
	},
	mounted() {
		// 获取导航栏数据
		this.getNavList();
		// 获取头条数据
		this.getHeadlinesData();
	},
	components:{
		toutiaoDetail
	},
	methods: {
		// 获取导航栏数据的函数
		async getNavList() {
			const navDataList = await request('/navBar');
			// console.log(navDataList)
			if (navDataList.code === 200) {
				this.navData = navDataList.navBar.data;
			}
		},
		// 获取头条数据的函数
		async getHeadlinesData() {
			const result = await request('/headerBar');
			this.headlinesData = result.headerBar.data.datalist;
		},
		async change(id){
			this.navId=id
			let headlinesData=this.headlinesData
			if(id==1){
				const result = await request('/headerBar')
				this.headlinesData=result.headerBar.data.datalist.slice(1,10)
			}else if(id==2){
				const result = await request('/headerBar')
				this.headlinesData=result.headerBar.data.datalist.slice(11,20)
			}else if(id==3){
				const result = await request('/headerBar')
				this.headlinesData=result.headerBar.data.datalist.slice(20,30)
			}else if(id==-1){
				const result = await request('/headerBar');
				this.headlinesData = result.headerBar.data.datalist;
			}else{
				const result = await request('/headerBar')
				this.headlinesData=result.headerBar.data.datalist.slice(30,40)
			}
		}
	}
};
</script>

<style lang="stylus">
.headlinesContainer
	width 100%
	.navScrollView
		width 100%
		height 70rpx
		text-align center
		font-size 30rpx
		white-space nowrap
		display flex 
		// background-color pink
		.navItem
			box-sizing border-box
			width 250rpx
			margin 10rpx 20rpx
			line-height 15rpx
			&.active
				font-weight 700
				border-bottom 4rpx solid #0bd68c
	.imgContainer
		width 100%
		height 420rpx
		background-color green
		position relative
		image
			width 100%
			height 100%
		.title
			text-align center
			width 600rpx
			padding 15rpx 30rpx
			border-radius 50rpx
			color white
			background-color rgba(0, 0, 0, 0.5)
			position absolute
			bottom 25rpx
			left 26rpx
			font-size 26rpx
	.infoContainer
		margin-top 10rpx
		height 100%
		.viewItem
			width 100%
			height 300rpx
			border-bottom 1rpx solid #ccc
			display flex
			.left
				width 60%
				height 300rpx
				padding 20rpx
				.top
					height 90rpx
					color #222222
					width 100%
					display -webkit-box
					/* 纵向对齐 */
					-webkit-box-orient vertical
					/* 第二行有省略号 */
					-webkit-line-clamp 2
					overflow hidden
					text-overflow ellipsis
					padding 30rpx 0
				.bottom
					margin-top 20rpx
					display flex
					justify-content space-between
					image
						width 50rpx
						height 50rpx
						border-radius 50%
					text
						color #777777
			.right
				width 30%
				height 300rpx
				image
					margin-top 50rpx
					width 100%
					height 200rpx
</style>
